<template>
	<view class="luck">
		<!-- <view class="luck_header flex_between_center margin padding bg-gradual-orange radius">
			<view class="header_info flex_start_center">
				<img :src="userInfo.avatarUrl" alt="头像" class='round header_info_pic'>
				<view class="info_name margin-left flex_start">
					<view class="margin-bottom-sm">已经连续签到<text class="info_name_font inline_block"> 2 </text>天</view>
					<view >当前已有积分：5</view>
				</view>
			</view>
			<button class="cu-btn radius shadow" @tap="signHandle" :disabled="isSign">{{isSign?'已签到':'签到'}}</button>
		</view> -->
		<view class="canvas_wrap">
			<view class="canvas-container" :style="[canvasStyle]">
				<view :animation="animationData" class="canvas-content" :style="[canvasStyle]" v-if="awardsList">
					<canvas :style="[canvasStyle]" class="canvas-element" canvas-id="lotteryCanvas"></canvas>
					<view class="canvas-line">
						<view class="canvas-litem" v-for="(item,index) in awardsList" :key="index"
							:style="{'transform': 'rotate('+item.lineTurn+')','transform-origin':'50% '+ canvasWH/2+'px','left':canvasWH/2+'px','height':canvasWH/2+'px'}">
						</view>
					</view>
					<view class="canvas-list">
						<view class="canvas-item" v-for="(item,index) in awardsList" :key="index">
							<view class="canvas-item-text"
								:style="{'transform': 'rotate('+item.turn+')','transform-origin':'50% '+ canvasWH/2+'px'}">
								{{item.award}}
							</view>
						</view>
					</view>
				</view>
				<view @tap="getLottery" :class="['canvas-btn',btnDisabled]"
					:style="{'left':canvasWH/2-40+'px','top':canvasWH/2-40+'px'}">拼团中</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import {getCookieSync,navigateToNewPage} from "../../common/js/public.js"
	const app = {}
	export default {
		onLoad() {
			// this.userInfo= getCookieSync("wxUserInfo");
			this.userInfo = {};
			this.init();
		},
		data() {
			return {
				userInfo: null,
				isSign: false,
				animationData: null,
				btnDisabled: '',
				awardsList: null
			}
		},
		computed: {
			canvasWH() {
				return uni.getSystemInfoSync().windowWidth - 50;
			},
			canvasStyle() {
				return {
					width: this.canvasWH + 'px',
					height: this.canvasWH + 'px'
				}
			}
		},
		onLoad() {
			this.getLottery()
		},
		onReady() {
			let that = this;
			app.awardsConfig = {
				chance: true,
				awards: [{
						'index': 0,
						'name': '拼团失败'
					},
					{
						'index': 1,
						'name': '拼团成功'
					},
					{
						'index': 2,
						'name': '拼团失败'
					},
					{
						'index': 3,
						'name': '拼团成功'
					},
					{
						'index': 4,
						'name': '拼团失败'
					},
					{
						'index': 5,
						'name': '拼团成功'
					}
				]
			}
			// 绘制转盘
			var awardsConfig = app.awardsConfig.awards,
				len = awardsConfig.length,
				rotateDeg = 360 / len / 2 + 90,
				html = [],
				turnNum = 1 / len // 文字旋转 turn 值
			that.btnDisabled = app.awardsConfig.chance ? '' : 'disabled'
			let r = this.canvasWH / 2;
			var ctx = wx.createContext()
			for (var i = 0; i < len; i++) {
				// 保存当前状态
				ctx.save();
				// 开始一条新路径
				ctx.beginPath();
				// 位移到圆心，下面需要围绕圆心旋转
				ctx.translate(r, r);
				// 从(0, 0)坐标开始定义一条新的子路径
				ctx.moveTo(0, 0);
				// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
				ctx.rotate((360 / len * i - rotateDeg) * Math.PI / 180);
				// 绘制圆弧
				ctx.arc(0, 0, r, 0, 2 * Math.PI / len, false);

				// 颜色间隔
				let randomColor = [];
				for (let i = 0; i < 2; i++) {
					var rc = Math.floor(Math.random() * 256);
					var gc = Math.floor(Math.random() * 256);
					var bc = Math.floor(Math.random() * 256);
					let str = "rgb(" + rc + ',' + gc + ',' + bc + ")";
					randomColor.push(str)
				}
				console.log(randomColor)
				if (i % 2 == 0) {
					ctx.setFillStyle(randomColor[0]);
				} else {
					ctx.setFillStyle(randomColor[1]);
				}

				// 填充扇形
				ctx.fill();
				// 绘制边框
				ctx.setLineWidth(0.5);
				ctx.setStrokeStyle(randomColor[0]);
				ctx.stroke();

				// 恢复前一个状态
				ctx.restore();

				// 奖项列表
				html.push({
					turn: i * turnNum + 'turn',
					lineTurn: i * turnNum + turnNum / 2 + 'turn',
					award: awardsConfig[i].name
				});
			}
			that.awardsList = html;
			console.log(that.awardsList)
		},
		methods: {
			init() {

			},
			signHandle() {
				this.isSign = true;
			},
			getLottery(num) {
				var that = this
				// var awardIndex = Math.random() * 6 >>> 0;
				var awardIndex = num;

				// 获取奖品配置
				var awardsConfig = app.awardsConfig,
					runNum = 8
				if (awardIndex < 2) awardsConfig.chance = false


				// 旋转抽奖
				app.runDegs = app.runDegs || 0;
				app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / 6));

				var animationRun = wx.createAnimation({
					duration: 4000,
					timingFunction: 'ease'
				})
				that.animationRun = animationRun
				animationRun.rotate(app.runDegs).step();
				that.animationData = animationRun.export();
				that.btnDisabled = 'disabled';


				// 记录奖品
				var winAwards = wx.getStorageSync('winAwards') || {
					data: []
				};
				winAwards.data.push(awardsConfig.awards[awardIndex].name + '1个');
				wx.setStorageSync('winAwards', winAwards);
				// 中奖提示
				setTimeout(() => {
					// if (awardsConfig.awards[awardIndex].index === 1 || awardsConfig.awards[awardIndex].index ===
					// 	3 || awardsConfig.awards[awardIndex].index === 5) {
					// 	// this.$emit("jackpot")
					// } else {
					// 	wx.showModal({
					// 		title: '恭喜',
					// 		content: '获得' + (awardsConfig.awards[awardIndex].name),
					// 		showCancel: false
					// 	})
					// 	this.$emit("jackpot")
					// }

					this.$emit("jackpot")

					if (awardsConfig.chance) {
						that.btnDisabled = '';
					}
				}, 4500);
			},

		}
	}
</script>

<style lang="less" scoped>
	.canvas_wrap_box {
		position: relative;
		margin: 0 auto;
	}

	.zhen {
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		line-height: 120rpx;
	}

	.canvas_wrap {
		margin-top: 60rpx;
	}

	.header_info_pic {
		width: 140rpx;
		height: 140rpx;
	}

	.info_name {
		font-size: 26rpx;
	}

	.info_name_font {
		font-size: 40rpx;
		font-weight: 600;
		margin: 0 6rpx;
	}



	/* 转盘 */
	.canvas-container ul,
	.canvas-container li {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.canvas-container {
		margin: 0 auto;
		position: relative;
		border-radius: 50%;
		box-shadow: 0 2px 3px #333,
			0 0 2px #000;
	}

	.canvas-content {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		display: block;
		border-radius: inherit;
		background-clip: padding-box;
		background-color: #ffcb3f;
	}

	.canvas-element {
		position: relative;
		z-index: 1;
		width: inherit;
		height: inherit;
		border-radius: 50%;
	}

	.canvas-list {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 9999;
		overflow: hidden;
	}

	.canvas-item {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #e4370e;
		font-weight: bold;
		text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
	}

	.canvas-item-text {
		position: relative;
		display: block;
		padding-top: 20px;
		margin: 0 auto;
		text-align: center;
	}

	/* 分隔线 */
	.canvas-line {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 99;
	}

	.canvas-litem {
		position: absolute;
		top: 0;
		width: 1px;
		background-color: rgba(228, 55, 14, .4);
		overflow: hidden;
	}


	.canvas-btn {
		position: absolute;
		/* left: 110px;
  top: 110px; */
		z-index: 400;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		color: #F4E9CC;
		background-color: #E44025;
		line-height: 80px;
		text-align: center;
		font-size: 20px;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, .6);
		box-shadow: 0 3px 5px rgba(0, 0, 0, .6);
		text-decoration: none;
	}

	.canvas-btn::after {
		position: absolute;
		display: block;
		content: ' ';
		left: 10px;
		top: -46px;
		width: 0;
		height: 0;
		overflow: hidden;
		border-width: 30px;
		border-style: solid;
		border-color: transparent;
		border-bottom-color: #E44025;
	}

	.canvas-btn.disabled {
		pointer-events: none;
		background: #B07A7B;
		color: #ccc;
	}

	.canvas-btn.disabled::after {
		border-bottom-color: #B07A7B;
	}

	.gb-run {
		-webkit-transition: all 6s ease;
		transition: all 6s ease;
	}

	.luck {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.9);
		display: flex;
		align-items: center;

		.canvas_wrap {
			border-radius: 20upx;
			position: fixed;
			display: flex;
			flex-direction: column;
			// background: white;
			left: 0;
			right: 0;
			// bottom: 0;
			// width: 80%;
			margin: 0 auto;
			align-items: center;
		}
	}
</style>
